<template>
	<view class="page">
		<chatSession :chatData="chatMessage"></chatSession>
		<view class="fun-flex-row fun-justify-between fun-items-center send-wrap">
			<input v-model="text" placeholder="Please enter your question." type='text' />
			<image src="@/static/more/send.png" @click="send" />
		</view>
	</view>
</template>

<script>
	import {chatSend} from "@/api/more.js"
	import chatSession from "@/components/chatSession.vue"
	export default {
		data() {
			return {
				text: "",
				socketOpen: false,
				socketMsgQueue: [],
				chatMessage:[]
			};
		},

		onLoad() {
			uni.connectSocket({
				url: this.COFIG?.baseUrl + '/api/app/chatws',
				header: {
					'content-type': 'application/json'
				},
			});

			uni.onSocketOpen((res) => {
				console.log('WebSocket连接已打开！');
				this.socketOpen = true;
				for (var i = 0; i < this.chatMessage.length; i++) {
					this.sendSocketMessage(this.chatMessage[i]);
				}
				this.chatMessage = [];
			});

			uni.onSocketMessage((res) => {
				console.log('收到服务器内容：' + res.data);
				this.chatMessage = [];
				this.chatMessage.push(res?.data)
			});

			uni.onSocketError((res) => {
				console.log('WebSocket连接打开失败，请检查！');
			});

			uni.onSocketClose(function(res) {
				console.log('WebSocket 已关闭！');
			});
		},

		methods: {
			sendSocketMessage(msg) {
				this.chatMessage = [];
				if (this.socketOpen) {
					uni.sendSocketMessage({
						data: msg
					});
					this.chatMessage.push({
						isId: 0,
						text: msg
					});
				} else {
					this.chatMessage.push({
						isId: 0,
						text: msg
					});
				}
			},
			close() {
				uni.closeSocket();
			},

			send() {
				if (!this.text) {
					this.UTILS.logStr("Please enter your question.")
					return
				}
				chatSend({
					text: this.text
				}).then(res => {
					if (res.code == 0) {
						this.sendSocketMessage(this.text);
						this.text = "";
					} else {
						this.UTILS.logStr(res.msg || "消息发送失败")
					}
				})
			},
		},
		
		components:{
			chatSession
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f6f6f6;
		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		height: 100%;
		.section {
			
			background-color: #ffffff;
			height: calc(100% - 60px - 32rpx);

			.text-wrapper {
				padding: 24rpx;
				background-color: #b0b1bf24;
				border-radius: 24rpx 24rpx 24rpx 0rpx;
				backdrop-filter: blur(13.8rpx);

				.text_3 {
					color: #000000;
				}
			}

			.text-wrapper_2 {
				padding: 24rpx;
				background-color: #1a7b99;
				border-radius: 24rpx 24rpx 0rpx 24rpx;

				.text_4 {
					color: #ffffff;
				}
			}

			.font {
				font-size: 28rpx;
				font-family: SF Pro Display;
			}

			.image-wrapper {
				padding: 24rpx;
				background-color: #b0b1bf24;
				border-radius: 24rpx 24rpx 24rpx 0rpx;
				backdrop-filter: blur(13.8rpx);

				.image_5 {
					width: 94rpx;
					height: 12rpx;
				}
			}
		}

		.send-wrap {
			margin: 28rpx 32rpx;
			padding: 20rpx 20rpx 20rpx 32rpx;
			background-color: #ffffff;
			border-radius: 50rpx;

			input {
				flex: 1;
				line-height: 28rpx;
				font-size: 28rpx;
			}

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>